<template>
    <!-- 服务日历 -->
    <div>
        <div class="time" style="margin-top:60px;">
            <div style="margin-left:16px; font-size: 30px;">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item style=" font-size: 17px;">当前位置：首页</el-breadcrumb-item>
                    <el-breadcrumb-item style=" font-size: 17px;">服务日历</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div style="margin-right:16px">{{ date | formatDateTime }}</div>
        </div>

        <!-- 中间 -->
        <div class="content">
            <el-tabs v-model="active" @tab-click="handleClick">
                <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
                    <router-view></router-view>
                </el-tab-pane>
            </el-tabs>
        </div>

    </div>
</template>

<script>

export default {
    components: {

    },

    data() {
        return {
            date: new Date(),
            // radio: "所有",
            active: "0",
            tabList: [
                { label: "服务跨度", name: "0" },
                { label: "日历服务", name: "1" },
            ],
        };
    },
    filters: {
        formatDateTime(value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? "0" + MM : MM;
            let d = date.getDate();
            d = d < 10 ? "0" + d : d;
            let h = date.getHours();
            h = h < 10 ? "0" + h : h;
            let m = date.getMinutes();
            m = m < 10 ? "0" + m : m;
            let s = date.getSeconds();
            s = s < 10 ? "0" + s : s;
            return y + "年" + MM + "月" + d + "日" + h + ":" + m + ":" + s;
        }
    },
    created() {
    },
    mounted() {
        var that = this;
        this.timer = setInterval(() => {
            that.date = new Date(); //修改数据date
        }, 1000);
    },
    watch: {
        $route(to, from) {
            // 判断跳转的路径是否你要监听的路径，我这里为 '/search'
            if (to.path == "/0") {
                // 通过路径获取新的 keywords 值
                let param = to.query.keywords;
                // 通过新的参数值获取新的数据
                // this.getdata(param);
                console.log("index.watch", this.param);
            }
        }
    },
    methods: {

        handleClick(tab, event) {
            this.$router.push("/Workbench/Calendar/" + tab.name);
            console.log("执行了click事件")

        },

    },
    computed: {},
}
</script>
<style >
.time {
    font-size: 16px;
    line-height: 30px;
    color: rgb(102, 102, 102);
    display: flex;
    justify-content: space-between;
}

.content {
    margin: 20px 0;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 6px rgb(15 86 179 / 10%);
}

.el-tabs {
    width: 98%;
    margin: auto;
}

.el-tabs__item {
    font-size: 15px;
}

.tail {
    margin: 20px 0;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 6px rgb(15 86 179 / 10%);
}
</style>